﻿@page "/dashboard"
@inherits TscComponentBase

<PageTitle>@I18n.Dashboard("Dashboard")</PageTitle>

<AutoHeight>
    <HeaderContent>
        <div class="d-flex mb-6">
            <SLabeledRadioGroup TValue="ModeTypes" @bind-Value=Mode Dense ActiveClass="fill-background" Class="mr-6 my-auto white">
                <SLabeledRadio Value="ModeTypes.Folder">
                    <SIcon Color="@(Mode == ModeTypes.Folder ? "primary" : "emphasis2")">@IconConstants.Folder</SIcon>
                </SLabeledRadio>
                <SLabeledRadio Value="ModeTypes.Table">
                    <SIcon Color="@(Mode == ModeTypes.Table ? "primary" : "emphasis2")">@IconConstants.List</SIcon>
                </SLabeledRadio>
            </SLabeledRadioGroup>
            @if (Mode is ModeTypes.Folder)
            {
                <SButton BorderRadiusClass="" Color="" Depressed Text Outlined Class="mr-6 my-auto regular--text body2 white" OnClick="() => ExpandOrCloseAll(ExpandAll)">
                    @I18n.Dashboard( ExpandAll ? "Close all" : "Expend all")
                </SButton>
            }
            <SSearch @bind-Value="Search" OnEnter=OnSearchAsync Style="flex:none;width:300px !important;" BackgroundColor="white" />
            <MSpacer />
            <SButton OnClick="OpenAddFolderDialog" Small Class="mr-6 my-auto" Style="min-width:108px !important;">@I18n.Dashboard("Add folder")</SButton>
            <SButton OnClick="OpenAddDashboardDialog" Small Class="my-auto" Style="min-width:140px !important;">@I18n.Dashboard("Add dashboard")</SButton>
        </div>
    </HeaderContent>
    <AutoHeightContent>
        <DefaultCard Class="px-2">
            @if (Mode is ModeTypes.Table)
            {
                <SDataTable Items="Dashboards"
                        TItem="DashboardDto"
                        ItemsPerPage="PageSize"
                        Headers="GetHeaders()"
                        Height="@("calc(100vh - 289px)")">
                    <HeaderColContent Context="header">
                        <span>@header.Text</span>
                    </HeaderColContent>
                    <ItemColContent>
                        @switch (context.Header.Value)
                        {
                            case nameof(DashboardDto.Name):
                                <div class="hover-pointer" @onclick="()=> NavigateToConfiguration(context.Item)">@context.Item.Name</div>
                                break;
                            case nameof(DashboardDto.Folder):
                                <div>@context.Item.Folder.Name</div>
                                break;
                            case "Action":
                                <div class="d-flex">
                                    <SButton Icon Class="mr-4"><SIcon Tooltip="@I18n.T("Edit")" OnClick="() => OpenUpdateDashboardDialog(context.Item)" Style="color: #4318FF !important;">@IconConstants.Update</SIcon></SButton>
                                    <SButton Icon Color="red" OnClick="async () => await OpenRemoveDashboardDialogAsync(context.Item)"><SIcon Tooltip="@I18n.T("Remove")" Style="color:#F44336 !important;">@IconConstants.Remove</SIcon></SButton>
                                </div>
                                break;
                            case nameof(DashboardDto.Model):
                                <span class="subtitle">@I18n.Dashboard(context.Value?.ToString() ?? "")</span>
                                break;
                            default:
                                <span class="subtitle">@context.Value</span>
                                break;
                        }
                    </ItemColContent>
                </SDataTable>
            }
            else
            {
                <MList Height="@("calc(100vh - 289px)")" Class="overflow-auto folder">
                    @foreach (var folder in Folders)
                    {
                        <MHover>
                            <MListGroup PrependIcon="@(IconConstants.Folder)"
                                NoAction
                                Disabled=!folder.Dashboards.Any()
                                @attributes="@context.Attrs"
                                @bind-Value=folder.IsActive>
                                <ActivatorContent>
                                    <MListItemContent>
                                        <MListItemTitle Class="h8">@folder.Name</MListItemTitle>
                                    </MListItemContent>
                                </ActivatorContent>
                                <AppendIconContent>
                                    @if (context.Hover)
                                    {
                                        <SButton Icon OnClick="() => OpenUpdateFolderDialog(folder)" Class="mr-4" OnClickStopPropagation><SIcon Tooltip="@I18n.T("Edit")" Style="transform: none !important">@IconConstants.Update</SIcon></SButton>
                                        <SButton Icon Color="red" Class="mr-10" OnClick="async () => await OpenRemoveFolderDialogAsync(folder)" OnClickStopPropagation><SIcon Tooltip="@I18n.T("Remove")" Color="red" Style="transform: none !important">@IconConstants.Remove</SIcon></SButton>
                                    }
                                    @if (folder.Dashboards.Any())
                                    {
                                        <SIcon Size="28" Color="@(folder.IsActive ? "primary" : "")">@IconConstants.Down</SIcon>
                                    }
                                </AppendIconContent>
                                <ChildContent>
                                    @foreach (var dashboard in folder.Dashboards)
                                    {
                                        <MHover Context="childContext">
                                            <MListItem @attributes="@childContext.Attrs" Link Class="ml-n6" OnClick="()=> NavigateToConfiguration(dashboard)">
                                                <MListItemContent>
                                                    <MListItemTitle Class="body emphasis2--text">
                                                        @dashboard.Name
                                                    </MListItemTitle>
                                                </MListItemContent>
                                                <MListItemAction>
                                                    <SButton OnClickStopPropagation Icon Class="mr-4" Style="@(childContext.Hover?"":"visibility: hidden")" OnClick="() => OpenUpdateDashboardDialog(dashboard)"><SIcon Tooltip="@I18n.T("Edit")">@IconConstants.Update</SIcon></SButton>
                                                    <SButton OnClickStopPropagation Icon Color="red" Style="@(childContext.Hover?"":"visibility: hidden")" OnClick="async () => await OpenRemoveDashboardDialogAsync(dashboard)"><SIcon Tooltip="@I18n.T("Remove")" Color="red">@IconConstants.Remove</SIcon></SButton>
                                                </MListItemAction>
                                            </MListItem>
                                            @if (folder.Dashboards.Last() != dashboard)
                                            {
                                                <div class="px-4" style="background: rgba(246, 248, 253, 0.5);@(!childContext.Hover?"":"visibility: hidden")">
                                                    <div style="height: 1px;background:#E4E8F3;" />
                                                </div>
                                            }
                                        </MHover>
                                    }
                                </ChildContent>
                            </MListGroup>
                        </MHover>
                        @if (Folders.Last() != folder)
                        {
                            <div class="px-4" style="background: rgba(246, 248, 253, 0.5);@(folder.IsActive?"visibility: hidden":"")">
                                <div style="height: 1px;background:#E4E8F3;" />
                            </div>
                        }
                    }
                </MList>
            }
        </DefaultCard>
    </AutoHeightContent>
    <FooterContent>
        <SPagination Class="mt-5" @bind-Page="Page" @bind-PageSize=PageSize Total=Total />
    </FooterContent>
</AutoHeight>

<AddFloderDialog @bind-Visible="AddFolderDialogVisible" OnSubmitSuccess=GetFoldersAsync />
<UpdateFolderDialog @bind-Visible="UpdateFolderDialogVisible" FolderId=CurrentFolderId OnSubmitSuccess=GetFoldersAsync />
<AddDashboardDialog @bind-Visible="AddDashboardDialogVisible" OnSubmitSuccess=OnAddDashboardSuccessAsync />
<UpdateDashboardDialog @bind-Visible="UpdateDashboardDialogVisible" DashboardId=CurrentDashboardId OnSubmitSuccess=OnUpdateDashboardSuccessAsync />